<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background: darkblue;
        }
        img{
            position: absolute;
        }
        h1{
            color: #fff;
        }

    </style>
</head>
<body>
    <!--  -->
    <button onclick="start()">开始游戏</button>
    <button onclick="end()">结束游戏</button>
    <h1>当前分数为: <span id="score">0</span> </h1>
    <script>
        
        var timer;
        // setInterval(function(){},1000)  // 每隔一秒钟 执行一下函数
        function start () {
            clearInterval(timer)
            timer = setInterval(function(){
                var img = document.createElement('img')  // 创建一个img标签
                img.src = 'img/star.png'  // 给标签设置src属性 是star

                var l = Math.random() * 700  // 0-700的随机数
                var t = Math.random() * 400  // 0-500的随机数
                var w = Math.random() * 100 + 20  // 20-120的随机数

                img.style.top = t + 'px'
                img.style.left = l + 'px'
                img.style.width = w + 'px'

                img.onclick = function() {
                    img.style.display = 'none'
                    score.innerHTML = score.innerHTML - 0 + 1
                }


                document.body.appendChild(img)  // 将图片放置在body元素中


            },200)  // 每隔一秒钟 执行一下函数
        }
        
        function end () {
            clearInterval(timer)
            // 防止游戏结束后  图片还可以点击
            // 获取所有的图片，移除其点击事件

            var allImg = document.getElementsByTagName('img')
            for(var i=0;i<allImg.length;i++) {
                allImg[i].onclick = null
            }

        }
    </script>
</body>
</html>